<template>
  <div class="MonthUsingStatistics">
    <!-- 月用量统计 -->
    <div id="MonthUsingStatistics" class="monthUsingStatistics-main"></div>
    <!-- <div id="twoPiemain" style="width: 500px;height:300px;padding:0;"></div> -->
  </div>
</template>

<script>
const echarts = require('echarts')
import { MonthUsingQuery } from '@/api/collectingDevices/flConcentratorManager/index'
export default {
  name: 'MonthUsingStatistics',
  data() {
    return {
      echarts: '',
      waterData: [],
    }
  },
  methods: {
    changeHeightWidth(i, x, y, height, width) {
      console.log('height, width', height, width)
      let MonthUsingStatistics = document.getElementById('MonthUsingStatistics')
      MonthUsingStatistics.style.height = height - 10 + 'px'
      MonthUsingStatistics.style.width = width + 'px'
      this.echarts = this.$echarts.init(MonthUsingStatistics)
      this.echarts.resize()
    },
    createEcharts() {
      // 基于准备好的dom，初始化echarts实例
      this.echarts = echarts.init(
        document.getElementById('MonthUsingStatistics')
      )
      let resData = []
      let tdate = []
      let max = 0
      let min = 0

      for (var i = 0; i < 30; i++) {
        tdate[i] = this.dateChange(-29 + i)
        resData[i] = 0
        if (i > max) {
          max = 0
        }
        if (i < min) {
          min = 0
        }
      }
      // 指定图表的配置项和数据
      var option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            crossStyle: {
              color: '#999',
            },
          },
        },
        toolbox: {
          feature: {
            dataView: { show: true, readOnly: false },
            magicType: { show: true, type: 'bar' },
            restore: { show: true },
            saveAsImage: { show: true },
          },
        },
        legend: {
          data: ['用量'],
        },
        xAxis: [
          {
            type: 'category',
            data: tdate,
            axisPointer: {
              type: 'shadow',
            },
          },
        ],
        yAxis: [
          {
            type: 'value',
            name: '水量',
            min: 0,
            max: 0,
            interval: 0,
            axisLabel: {
              formatter: '{value} 方',
            },
          },
        ],
        series: [
          {
            name: '用量',
            type: 'bar',
            data: resData,
          },
        ],
      }
      // 使用刚指定的配置项和数据显示图表。
      this.echarts.setOption(option)
      window.addEventListener('resize', () => {
        this.echarts.resize()
      })
    },
    dateChange(num = 0) {
      var date = new Date()
      date =
        date.getFullYear() +
        '-' +
        (date.getMonth() + 1 < 10
          ? '0' + (date.getMonth() + 1)
          : date.getMonth() + 1) +
        '-' +
        (date.getDate() < 10 ? '0' + date.getDate() : date.getDate())
      date += ' 00:00:00' //设置为当天凌晨12点
      date = Date.parse(new Date(date)) / 1000 //转换为时间戳
      date += 86400 * num //修改后的时间戳
      var newDate = new Date(parseInt(date) * 1000) //转换为时间
      return (
        newDate.getFullYear() +
        '-' +
        (newDate.getMonth() + 1 < 10
          ? '0' + (newDate.getMonth() + 1)
          : newDate.getMonth() + 1) +
        '-' +
        (newDate.getDate() < 10 ? '0' + newDate.getDate() : newDate.getDate())
      )
    },
    // 获取集中器统计数
    async AlwaysCopyData(call) {
      const res = await MonthUsingQuery()
      console.log(res.data, 'qingqiu ')
      let resData = []
      let tdate = []
      let max = 0
      let min = 0

      for (var i = 0; i < 30; i++) {
        tdate[i] = this.dateChange(-29 + i)
        resData[i] = 0
      }
      console.log(tdate)
      console.log(resData)
      if (res.data.length == 0) {
        console.log('无数据')
      } else {
        res.data.forEach(function (e) {
          for (var i = 0; i < tdate.length; i++) {
            if (tdate[i] == e.useDate) {
              resData[i] = e.useCount
              if (resData[i] > max) {
                max = resData[i]
              }
              if (resData[i] < min) {
                min = resData[i]
              }
              console.log(e.useCount)
              console.log(e.useDate)
              break
            }
          }
        })
      }
      let step = Math.round((max - min) / 4)
      max += step
      const values = res.data

      var d = this.dateChange(-1)
      console.log(d)
      // resData[0] = {value: values[0], name: '总数 '+values[0]};
      console.log(resData, '参数对么')

      // for (let i = 0; i < values.length; i++) {
      //     const element = values[i];

      // }
      // 获得需要的数据形式---------------------------
      // this.waterData = res.data[0]
      // console.log(this.waterData,'zongshuiliang ');
      // const AlwaysCopySum = res.data[0].zong
      // const AlwaysCopyed = res.data[0].yiwancheng
      // const notAlwaysCopyed = AlwaysCopySum - AlwaysCopyed
      // console.log(AlwaysCopySum,AlwaysCopyed,notAlwaysCopyed,'bingbingbign');

      this.echarts.setOption({})
      this.echarts.setOption({
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            crossStyle: {
              color: '#999',
            },
          },
        },
        toolbox: {
          feature: {
            dataView: { show: true, readOnly: false },
            magicType: { show: true, type: 'bar' },
            restore: { show: true },
            saveAsImage: { show: true },
          },
        },
        legend: {
          data: ['用量'],
        },
        xAxis: [
          {
            type: 'category',
            data: tdate,
            axisPointer: {
              type: 'shadow',
            },
          },
        ],
        yAxis: [
          {
            type: 'value',
            name: '水量',
            min: min,
            max: max,
            interval: step,
            axisLabel: {
              formatter: '{value} 方',
            },
          },
        ],
        series: [
          {
            name: '用量',
            type: 'bar',
            data: resData,
          },
        ],
      })
      call && call()
    },
  },
  mounted() {
    this.createEcharts()
    this.AlwaysCopyData(() => {
      let width = document.querySelector('.MonthUsingStatistics').parentNode
        .parentNode.parentNode.style.width
      let height = document.querySelector('.MonthUsingStatistics').parentNode
        .parentNode.parentNode.clientHeight
      console.info('width--', width.split('p')[0])
      this.changeHeightWidth(0, 0, 0, height, Number(width.split('p')[0]))
    })
  },
  beforeDestroy() {
    window.removeEventListener('resize', () => {
      this.echarts.resize()
    })
  },
}
</script>

<style>
.monthUsingStatistics-main {
  width: 320px;
  height: 220px;
}
</style>
